'use strict';

import React from 'react';
import { View, Text, Image, Button } from 'react-native';
import { createStackNavigator } from 'react-navigation';

class LogoTitle extends React.Component {
  render() {
    return (
      <Image
        source={require('./img/icon_logo.png')}
        style={{ width: 30, height: 30 }}
      />
    );
  }
}

class HomeScreen extends React.Component {

  static navigationOptions = {
    // title: 'Home1',

    // headerStyle: {
    //   backgroundColor: '#f4511e',
    // },
    // headerTintColor: '#fff',
    // headerTitleStyle: {
    //   fontWeight: 'bold',
    // },

    headerTitle: <LogoTitle />,
    headerRight: (
      <Button
        onPress={() => alert('This is a button!')}
        title="Info"
        // onPress={navigation.getParam('increaseCount')} // FIXME!
        // title="+1"
        color="#fff"
      />
    ),
  };

  state = {
    count: 0,
  };

  _increaseCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  componentDidMount() {
    this.props.navigation.setParams({ increaseCount: this._increaseCount });
  }

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {

  // 第一种写法
  // static navigationOptions = {
  //   title: 'Details',
  //   header: null
  // };

  // 第二种写法
  static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('otherParam', 'A Nested Details Screen'),
      header: null
    };
  };

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
          title="Go to Details... again"
          // onPress={() => this.props.navigation.navigate('Details')}
          onPress={() => this.props.navigation.push('Details')}
        />
        <Text />
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Text />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

/**
 * createStackNavigator is a function that takes a route configuration object and an options object 
 * and returns a React component.
 */
const RootStack = createStackNavigator(
  {
  // Home: {
  //   screen: HomeScreen
  // },
    Home: HomeScreen,
    Details: DetailsScreen
  }, 
  {
    initialRouteName: 'Home',
    // headerMode: 'none',
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  }
);

/**
 * In React Native, the component exported from App.js is the entry point (or root component) 
 * for your app.
 */
export default class App extends React.Component {

  render() {
    return <RootStack />;
  }

}

// export default createStackNavigator({
//   Home: {
//     screen: HomeScreen
//   },
// });
